import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import {
  Row, Col, Card, Icon, Tooltip, Form, Button,
  Input, Spin, Table, message, InputNumber, Drawer,
} from 'antd';
import styles from './index.less';

const FormItem = Form.Item;
class Small extends Component {
  constructor(props) {
    super(props);
    this.state = {
      login: false,
      totala: 0,
      page: 1,
      pageSize: 10,
      similarList: [],
      query: '', // 搜索的关键词
      minWordCount: '', // 最小字数
      maxWordCount: '', // 最大字数
      minAskCount: '', // 最小询问次数
      maxAskCount: '', // 最大询问次数
      order: 'wordCount', // 排序字段
      sort: 'asc', //  排序方式，asc：升序，desc：降序,
      dxList: [],
      selectedRowKeys: [],
      selectedRows: [],
    };
  }

  componentDidMount() {
    this.knowledgeQuestionList();
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.ProgressName === false) {
      // this.props.form.setFields({ "inputA": "" })
      this.knowledgeQuestionList();
    }
  }

  sx = () => {
    this.props.form.setFields({ inputA: '' });
    let user = this.userInfo();
    this.setState({ query: user.inputA, }, () => {
      this.knowledgeQuestionList();
    });
  };

  knowledgeQuestionList = () => {
    this.setState({ login: true });
    const { dispatch, currentUser } = this.props;
    const { page, pageSize, query } = this.state;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgeQuestionChatList',
        payload: { query, current: page, size: pageSize, },
        callback: res => {
          if (!res.records.length && page - 1 != 0) {
            this.setState({ page: page - 1, }, () => {
              this.knowledgeQuestionList();
            });
          } else {
            this.setState({ similarList: res.records, totala: res.total, login: false, });
          }
        },
      });
    });
  };

  pageWay = a => {
    this.setState({ page: a }, () => {
      this.knowledgeQuestionList();
    });
  };

  onShowSizepageWay = (a, b) => {
    this.setState({ page: a, pageSize: b }, () => {
      this.knowledgeQuestionList();
    });
  };

  // 表单数据
  userInfo = () => {
    return this.props.form.getFieldsValue();
  };

  // 引导黑名单回调
  knowledgeQuestionDelete = (questions, url, isIgnore) => {
    if (questions.length === 0) {
      message.error('请先选择需要操作内容');
    } else {
      const { dispatch, currentUser, taskId } = this.props;
      let payload = {};
      if (isIgnore) {
        payload = { ids: questions, taskId, };
      } else {
        payload = { questions, taskId, };
      };
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: url,
          payload,
          callback: res => {
            message.success(`${res.msg}`);
            this.setState({ login: false, selectedRowKeys: [], dxList: [], }, () => {
              this.knowledgeQuestionList();
            });
          },
        });
      });
    }
  };

  deleteTable = item => {
    this.setState({ login: true });
    this.knowledgeQuestionDelete(Array(item.question), 'knowledgeSmartMaintenance/knowledgeQuestionChatDelete');
  };

  deleteTables = item => {
    this.setState({ login: true });
    this.knowledgeQuestionDelete(Array(item.question), 'knowledgeSmartMaintenance/knowledgeQuestionChatBlacklist');
  };

  handleOpen = item => { };

  // 批量删除
  batchDelete = () => {
    const { selectedRows } = this.state;
    this.knowledgeQuestionDelete(selectedRows.map(item => item.question), 'knowledgeSmartMaintenance/knowledgeQuestionChatDelete');
  };

  // 批量移到黑名单
  moveBlacklist = () => {
    const { selectedRows } = this.state;
    this.knowledgeQuestionDelete(selectedRows.map(item => item.question), 'knowledgeSmartMaintenance/knowledgeQuestionChatBlacklist');
  };

  // 查询
  theQuery = () => {
    let user = this.userInfo();
    this.setState({ query: user.inputA, }, () => {
      this.knowledgeQuestionList();
    });
  };

  // 重新识别
  discern = () => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgeQuestionChatSubmit',
        payload: {},
        callback: res => {
          if (res.code === 0) {
            message.success(`${res.msg}`);
            this.knowledgeQuestionList();
            this.props.gress(0, res.data);
            //  进入进度条
          }
        },
      });
    });
  };

  // 批量忽略
  ignore = () => {
    const { dxList } = this.state;
    this.knowledgeQuestionDelete(dxList, 'knowledgeSmartMaintenance/knowledgeQuestionChatIgnore', 1);
  };

  // 忽略
  neglect = item => {
    this.setState({ login: true });
    this.knowledgeQuestionDelete(Array(item.id), 'knowledgeSmartMaintenance/knowledgeQuestionChatIgnore', 1);
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        let a = [];
        selectedRows.map((item, index) => {
          a.push(item.id);
        });
        this.setState({ dxList: a, selectedRowKeys, selectedRows });
      },
    };
    const columns = [
      {
        title: '问题组',
        width: '300px',
        dataIndex: 'question',
      },
      {
        title: '闲聊相似度',
        dataIndex: 'similarity',
        width: '160px',
      },
      {
        title: '操作',
        render: (text, item) => {
          return (
            <div className={styles.flexBj}>
              <div style={{ marginRight: 10, marginBottom: 4 }} className={styles.buttong3} onClick={() => this.neglect(item)}>
                <span>
                  <Icon size="small" type="eye-invisible" style={{ marginRight: 5 }} />
                </span>
                <span>忽略</span>
              </div>
              <div style={{ marginRight: 10, marginBottom: 4 }} className={styles.buttongl} onClick={() => this.deleteTable(item)}>
                <span>
                  <Icon size="small" type="delete" style={{ marginRight: 5 }} />
                </span>
                <span>删除</span>
              </div>
              <div style={{ marginRight: 10, marginBottom: 4 }} className={styles.buttong2} onClick={() => this.deleteTables(item)}>
                <span style={{ whiteSpace: 'nowrap' }}>
                  <Icon size="small" type="user-delete" style={{ marginRight: 5 }} />
                </span>
                <span style={{ whiteSpace: 'nowrap' }}>转移到黑名单</span>
              </div>
            </div>
          );
        },
      },
    ];

    return (
      <div style={{ minHeight: 'calc(100vh - 150px)', background: '#ffffff' }}>
        <Row>
          <Form style={{ marginBottom: 20 }} layout="inline">
            <FormItem>
              {getFieldDecorator('inputA', { initialValue: '' })(
                <Input onPressEnter={() => this.theQuery()} placeholder="请输入问题关键词" style={{ width: 200 }} />
              )}
            </FormItem>
            <FormItem className="zdyButtonZ">
              <Button onClick={this.theQuery} type="primary" icon="search">查询</Button>
            </FormItem>
            <span style={{ float: 'right' }}>
              <FormItem className="zdyButtonF">
                <Button onClick={this.ignore} type="primary">批量忽略</Button>
              </FormItem>
              <FormItem>
                <Button onClick={this.batchDelete} type="primary">批量删除</Button>
              </FormItem>
              <FormItem className="zdyButtonB">
                <Button onClick={this.moveBlacklist} type="primary">移到黑名单</Button>
              </FormItem>
              <FormItem className="zdyButtonC">
                <Button onClick={this.discern} type="primary">重新识别</Button>
              </FormItem>
            </span>
          </Form>
          <Spin spinning={this.state.login}>
            <Table
              className="zdyTable"
              rowSelection={rowSelection}
              style={{ padding: '20px 0px 0px 0px' }}
              columns={columns}
              dataSource={this.state.similarList} // 数据
              // onChange={this.handleChange}
              pagination={{
                // 分页
                total: this.state.totala,
                pageSize: this.state.pageSize, // 显示几条一页
                current: this.state.page, // 当前页
                showSizeChanger: true, // 是否显示可以设置几条一页的选项
                showQuickJumper: true,
                onChange: this.pageWay,
                onShowSizeChange: this.onShowSizepageWay,
              }}
              rowKey="id"
            />
          </Spin>
        </Row>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(Small));
